<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>密码查询列表</div>
            <div>
                <a class="download-btn" :href="fileUrl" target="_blank" download="devicePassword.xls">下载导入模板</a>
                <a-button class="pannel-btn" style="margin-right: 10px" size="small" type="primary" shape="round" @click="uploadFile()">批量导入</a-button>
                <a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addTool()">
                    <PlusCircleFilled />
                    新增密码查询
                </a-button>
            </div>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
                <template #action="{record}">
                    <router-link :to="{ path: '/devicePasswordAdd', query: { id: record.id } }" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></router-link>
                    <a @click="deleteToolType(record)" title="删除"><img src="@/assets/images/cz-delete.png"/></a>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script>
import { PlusCircleFilled } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import Upload from "@/util/upload";
export default {
    components: {
        PlusCircleFilled,
        ATable: Table,
        AButton: Button,
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "密码查询 / 密码查询管理",
            isBack: false,
        });
        const formState = ref({
            id: "",
            name: "",
            displayPriority: "",
        });
        const dataSource = ref([]);
        const columns = reactive([
            {
                title: "品牌中文",
                dataIndex: "name_cn",
                key: "name_cn",
            },
            {
                title: "品牌英文",
                dataIndex: "name_en",
                key: "name_en",
            },
            {
                title: "型号",
                dataIndex: "model",
                key: "model",
            },
            {
                title: "用户名",
                dataIndex: "username",
                key: "username",
                slots: { customRender: "username" },
            },
            {
                title: "密码",
                dataIndex: "password",
                key: "password",
            },
            {
                title: "管理地址",
                dataIndex: "url",
                key: "url",
            },
            {
                title: "操作",
                key: "action",
                slots: { customRender: "action" },
            },
        ]);
        const pagination = reactive({
            current: 1,
            pageSize: 10,
            total: 0,
        });
        return {
            dataSource,
            columns,
            pagination,
            formState,
            isLoading: ref(false),
            fileUrl:ref('')
        };
    },
    mounted() {
        this.fileUrl = process.env.VUE_APP_FILEURL + "/设备密码.xls";
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            httpRequest
                .post("获取设备密码列表", { page: this.pagination.current, pageSize: this.pagination.pageSize })
                .then((res) => {
                    this.dataSource = res.data.data;
                    this.pagination.total = res.data.total;
                })
                .finally(() => {
                    this.isLoading = false;
                });
        },
        handleTableChange(page) {
            this.pagination.current = page.current;
            this.getList();
        },
        deleteToolType(item) {
            Modal.confirm({
                title: "系统提示",
                content: "确认删除当前数据？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("删除设备密码", { id: item.id })
                            .then(() => {
                                message.success("删除设备密码成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "设备密码删除失败", key: "error" });
                            })
                            .finally(() => {
                                this.isLoading = false;
                                res();
                            });
                    });
                },
            });
        },
        addTool() {
            this.$router.push("/devicePasswordAdd");
        },
        uploadFile(){
			Upload.Single({ fileType: [".xls", ".xlsx"] }).then((res) => {
				if (res.code === 0) {
					httpRequest.post("设备密码批量导入",{file:res.data.fileUrl}).then(()=>{
						message.success("导入成功");
						this.getList();
					})
				}
			});
		},
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
.download-btn{
	font-size: 14px;
	color: #333;
	margin-right: 10px;
	&:hover{
		text-decoration: underline;
	}
}
</style>
